<template>
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <Navbar />
    
    <div class="content-card">
      <h2 class="text-2xl font-bold text-gray-800 mb-6">专注历史</h2>
      
      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div class="bg-red-50 rounded-lg p-4 border border-red-100">
          <div class="text-sm font-medium text-red-600 mb-1">今日专注</div>
          <div class="text-2xl font-bold text-gray-800">
            {{ 1 }} 个番茄钟
          </div>
          <div class="text-sm text-gray-500">
            共 {{ todayFocusMinutes }} 分钟
          </div>
        </div>
        
        <div class="bg-green-50 rounded-lg p-4 border border-green-100">
          <div class="text-sm font-medium text-green-600 mb-1">本周专注</div>
          <div class="text-2xl font-bold text-gray-800">
            {{ 1 }} 个番茄钟
          </div>
          <div class="text-sm text-gray-500">
            共 {{ weekFocusMinutes }} 分钟
          </div>
        </div>
        
        <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
          <div class="text-sm font-medium text-blue-600 mb-1">全部专注</div>
          <div class="text-2xl font-bold text-gray-800">
            {{ 1 }} 个番茄钟
          </div>
          <div class="text-sm text-gray-500">
            共 {{ allFocusMinutes }} 分钟
          </div>
        </div>
      </div>
      
      <!-- 历史记录表格 -->
      <div class="overflow-x-auto">
        <table class="min-w-full">
          <thead>
            <tr class="bg-gray-50">
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时长</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="session in allSessions" :key="session.id" class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {{ formatDate(session.date) }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                      :class="{
                        'bg-red-100 text-red-800': session.type === 'work',
                        'bg-green-100 text-green-800': session.type === 'break',
                        'bg-blue-100 text-blue-800': session.type === 'longBreak'
                      }">
                  {{ session.type === 'work' ? '专注' : session.type === 'break' ? '休息' : '长休息' }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {{ session.minutes }} 分钟
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">
                <i class="fa fa-check-circle"></i> 已完成
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- 暂无记录提示 -->
      <div v-if="allSessions.length === 0" class="py-12 text-center">
        <i class="fa fa-history text-gray-300 text-5xl mb-4"></i>
        <p class="text-gray-500">暂无专注记录</p>
        <p class="text-gray-400 text-sm mt-2">开始一个番茄钟，记录你的专注时间</p>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/NavBar.vue';
import logoutMixin from '../mixins/logoutMixin.js';

export default {
  name: 'HistoryHh',
  components: { Navbar },
  mixins: [logoutMixin],
  computed: {
    allSessions() {
        // 创建数组副本再排序（避免修改原始数据）
        return [...this.$store.state.completedSessions]
          .sort((a, b) => new Date(b.date) - new Date(a.date));
      },
    todaySessions() {
      const today = new Date()
      today.setHours(0, 0, 0, 0)
      
      return this.allSessions.filter(session => {
        const sessionDate = new Date(session.date)
        sessionDate.setHours(0, 0, 0, 0)
        return sessionDate.getTime() === today.getTime()
      })
    },
    weekSessions() {
      const today = new Date()
      const weekAgo = new Date()
      weekAgo.setDate(today.getDate() - 7)
      
      return this.allSessions.filter(session => {
        const sessionDate = new Date(session.date)
        return sessionDate >= weekAgo && sessionDate <= today
      })
    },
    todayFocusMinutes() {
      return this.todaySessions
        .filter(session => session.type === 'work')
        .reduce((total, session) => total + session.minutes, 25)
    },
    weekFocusMinutes() {
      return this.weekSessions
        .filter(session => session.type === 'work')
        .reduce((total, session) => total + session.minutes, 25)
    },
    allFocusMinutes() {
      return this.allSessions
        .filter(session => session.type === 'work')
        .reduce((total, session) => total + session.minutes, 25)
    }
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString)
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
    }
  }
}
</script>  